import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useHistory } from 'react-router-dom';

const EventDetail = ({ match }) => {
    const [event, setEvent] = useState(null);
    const [participant, setParticipant] = useState('');
    const [isFavorited, setIsFavorited] = useState(false); // 新增状态
    const history = useHistory();

    useEffect(() => {
        const fetchEvent = async () => {
            const response = await axios.get(`http://localhost:5000/events/${match.params.id}`);
            setEvent(response.data);
            // 检查活动是否已被收藏
            setIsFavorited(response.data.isFavorited || false);
        };
        fetchEvent();
    }, [match.params.id]);

    const handleParticipate = async () => {
        await axios.post(`http://localhost:5000/events/${event._id}/participate`, { participant });
        setEvent({ ...event, participants: [...event.participants, participant] });
        setParticipant('');
    };

    const handleBack = () => {
        history.push('/');
    };

    const handleFavoriteToggle = async () => {
        const updatedFavoritedStatus = !isFavorited;
        setIsFavorited(updatedFavoritedStatus);

        // 这里可以调用后端API来更新收藏状态
        await axios.post(`http://localhost:5000/events/${event._id}/favorite`, { isFavorited: updatedFavoritedStatus });
    };

    if (!event) return <div>Loading...</div>;

    return (
        <div>
            <button onClick={handleBack}>返回【约健体育联盟】</button>
            <h1>{event.title}</h1>
            <p>{event.date}</p>
            <p>{event.location}</p>
            <p>{event.description}</p>
            <h2>参与者</h2>
            <ul>
                {event.participants.map((p, index) => <li key={index}>{p}</li>)}
            </ul>
            <input
                type="text"
                value={participant}
                onChange={(e) => setParticipant(e.target.value)}
                placeholder="输入你的名字"
            />
            <button onClick={handleParticipate}>报名参加</button>
            <button onClick={handleFavoriteToggle}>
                {isFavorited ? '取消收藏' : '收藏'}
            </button> {/* 收藏/取消收藏按钮 */}
        </div>
    );
};

export default EventDetail;



import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useHistory } from 'react-router-dom';

const EventDetail = ({ match }) => {
    const [event, setEvent] = useState(null);
    const [participant, setParticipant] = useState('');
    const history = useHistory(); // 使用useHistory钩子

    useEffect(() => {
        const fetchEvent = async () => {
            const response = await axios.get(`http://localhost:5000/events/${match.params.id}`);
            setEvent(response.data);
        };
        fetchEvent();
    }, [match.params.id]);

    const handleParticipate = async () => {
        await axios.post(`http://localhost:5000/events/${event._id}/participate`, { participant });
        setEvent({ ...event, participants: [...event.participants, participant] });
        setParticipant('');
    };

    const handleBack = () => {
        history.push('/'); // 返回到主界面
    };

    if (!event) return <div>Loading...</div>;

    return (
        <div>
            <button onClick={handleBack}>返回【约健体育联盟】</button> {/* 返回按钮 */}
            <h1>{event.title}</h1>
            <p>{event.date}</p>
            <p>{event.location}</p>
            <p>{event.description}</p>
            <h2>参与者</h2>
            <ul>
                {event.participants.map((p, index) => <li key={index}>{p}</li>)}
            </ul>
            <input
                type="text"
                value={participant}
                onChange={(e) => setParticipant(e.target.value)}
                placeholder="输入你的名字"
            />
            <button onClick={handleParticipate}>报名参加</button>
        </div>
    );
};

export default EventDetail;
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useHistory } from 'react-router-dom';

const EventDetail = ({ match }) => {
    const [event, setEvent] = useState(null);
    const [participant, setParticipant] = useState('');
    const [isFavorited, setIsFavorited] = useState(false);
    const history = useHistory();

    useEffect(() => {
        const fetchEvent = async () => {
            const response = await axios.get(`http://localhost:5000/events/${match.params.id}`);
            setEvent(response.data);
            setIsFavorited(response.data.isFavorited || false);
        };
        fetchEvent();
    }, [match.params.id]);

    const handleParticipate = async () => {
        await axios.post(`http://localhost:5000/events/${event._id}/participate`, { participant });
        setEvent({ ...event, participants: [...event.participants, participant] });
        setParticipant('');
    };

    const handleBack = () => {
        history.push('/');
    };

    const handleFavoriteToggle = async () => {
        const updatedFavoritedStatus = !isFavorited;
        setIsFavorited(updatedFavoritedStatus);
        await axios.post(`http://localhost:5000/events/${event._id}/favorite`, { isFavorited: updatedFavoritedStatus });
    };

    if (!event) return <div>Loading...</div>;

    return (
        <div>
            <button onClick={handleBack}>返回【约健体育联盟】</button>
            <h1>{event.title}</h1>
            <p><strong>发布时间：</strong>{event.publishDate}</p>
            <p><strong>地址：</strong>{event.location}</p>
            <p><strong>活动时间：</strong>{event.date}</p>
            <p><strong>活动收费：</strong>{event.fee}</p>
            <p><strong>已报名人数：</strong>{event.participants.length}</p>
            <p><strong>咨询热线：</strong>{event.contact}</p>
            <p><strong>活动简介：</strong>{event.description}</p>
            <h2>参与者</h2>
            <ul>
                {event.participants.map((p, index) => <li key={index}>{p}</li>)}
            </ul>
            <input
                type="text"
                value={participant}
                onChange={(e) => setParticipant(e.target.value)}
                placeholder="输入你的名字"
            />
            <button onClick={handleParticipate}>报名参加</button>
            <button onClick={handleFavoriteToggle}>
                {isFavorited ? '取消收藏' : '收藏'}
            </button>
        </div>
    );
};

export default EventDetail;
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useHistory } from 'react-router-dom';
import { FacebookShareButton, TwitterShareButton, WeiboShareButton, WeChatShareButton, EmailShareButton } from 'react-share';

const EventDetail = ({ match }) => {
    const [event, setEvent] = useState(null);
    const [participant, setParticipant] = useState('');
    const [isFavorited, setIsFavorited] = useState(false);
    const history = useHistory();

    useEffect(() => {
        const fetchEvent = async () => {
            const response = await axios.get(`http://localhost:5000/events/${match.params.id}`);
            setEvent(response.data);
            setIsFavorited(response.data.isFavorited || false);
        };
        fetchEvent();
    }, [match.params.id]);

    const handleParticipate = async () => {
        await axios.post(`http://localhost:5000/events/${event._id}/participate`, { participant });
        setEvent({ ...event, participants: [...event.participants, participant] });
        setParticipant('');
    };

    const handleBack = () => {
        history.push('/');
    };

    const handleFavoriteToggle = async () => {
        const updatedFavoritedStatus = !isFavorited;
        setIsFavorited(updatedFavoritedStatus);
        await axios.post(`http://localhost:5000/events/${event._id}/favorite`, { isFavorited: updatedFavoritedStatus });
    };

    if (!event) return <div>Loading...</div>;

    const shareUrl = window.location.href; // 当前活动详情页的URL

    return (
        <div>
            <button onClick={handleBack}>返回【约健体育联盟】</button>
            <h1>{event.title}</h1>
            <p><strong>发布时间：</strong>{event.publishDate}</p>
            <p><strong>地址：</strong>{event.location}</p>
            <p><strong>活动时间：</strong>{event.date}</p>
            <p><strong>活动收费：</strong>{event.fee}</p>
            <p><strong>已报名人数：</strong>{event.participants.length}</p>
            <p><strong>咨询热线：</strong>{event.contact}</p>
            <p><strong>活动简介：</strong>{event.description}</p>
            <h2>参与者</h2>
            <ul>
                {event.participants.map((p, index) => <li key={index}>{p}</li>)}
            </ul>
            <input
                type="text"
                value={participant}
                onChange={(e) => setParticipant(e.target.value)}
                placeholder="输入你的名字"
            />
            <button onClick={handleParticipate}>报名参加</button>
            <button onClick={handleFavoriteToggle}>
                {isFavorited ? '取消收藏' : '收藏'}
            </button>

            {/* 分享按钮区域 */}
            <div>
                <h3>分享活动</h3>
                <FacebookShareButton url={shareUrl} quote={event.description}>
                    <button>分享到 Facebook</button>
                </FacebookShareButton>

                <TwitterShareButton url={shareUrl} title={event.title}>
                    <button>分享到 Twitter</button>
                </TwitterShareButton>

                <WeiboShareButton url={shareUrl} title={event.title} description={event.description}>
                    <button>分享到 微博</button>
                </WeiboShareButton>

                <WeChatShareButton url={shareUrl}>
                    <button>分享到 微信</button>
                </WeChatShareButton>

                <EmailShareButton url={shareUrl} subject={event.title} body={event.description}>
                    <button>通过邮件分享</button>
                </EmailShareButton>
            </div>
        </div>
    );
};

export default EventDetail;
// src/EventDetail.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useHistory } from 'react-router-dom';
import { FacebookShareButton, TwitterShareButton, WeiboShareButton, WeChatShareButton, EmailShareButton } from 'react-share';

const EventDetail = ({ match }) => {
    const [event, setEvent] = useState(null);
    const [participant, setParticipant] = useState('');
    const [isFavorited, setIsFavorited] = useState(false);
    const history = useHistory();

    useEffect(() => {
        const fetchEvent = async () => {
            const response = await axios.get(`http://localhost:5000/events/${match.params.id}`);
            setEvent(response.data);
            setIsFavorited(response.data.isFavorited || false);
        };
        fetchEvent();
    }, [match.params.id]);

    const handleParticipate = async () => {
        await axios.post(`http://localhost:5000/events/${event._id}/participate`, { participant });
        setEvent({ ...event, participants: [...event.participants, participant] });
        setParticipant('');
    };

    const handleBack = () => {
        history.push('/');
    };

    const handleFavoriteToggle = async () => {
        const updatedFavoritedStatus = !isFavorited;
        setIsFavorited(updatedFavoritedStatus);
        await axios.post(`http://localhost:5000/events/${event._id}/favorite`, { isFavorited: updatedFavoritedStatus });
    };

    // 点击“立即报名”按钮跳转到报名页面
    const handleRegisterClick = () => {
        history.push(`/register/${event._id}`);  // 跳转到报名页面
    };

    if (!event) return <div>Loading...</div>;

    const shareUrl = window.location.href; // 当前活动详情页的URL

    return (
        <div>
            <button onClick={handleBack}>返回【约健体育联盟】</button>
            <h1>{event.title}</h1>
            <p><strong>发布时间：</strong>{event.publishDate}</p>
            <p><strong>地址：</strong>{event.location}</p>
            <p><strong>活动时间：</strong>{event.date}</p>
            <p><strong>活动收费：</strong>{event.fee}</p>
            <p><strong>已报名人数：</strong>{event.participants.length}</p>
            <p><strong>咨询热线：</strong>{event.contact}</p>
            <p><strong>活动简介：</strong>{event.description}</p>
            <h2>参与者</h2>
            <ul>
                {event.participants.map((p, index) => <li key={index}>{p}</li>)}
            </ul>
            <button onClick={handleRegisterClick}>立即报名</button> {/* 立即报名按钮 */}
            <button onClick={handleFavoriteToggle}>
                {isFavorited ? '取消收藏' : '收藏'}
            </button>

            {/* 分享按钮区域 */}
            <div>
                <h3>分享活动</h3>
                <FacebookShareButton url={shareUrl} quote={event.description}>
                    <button>分享到 Facebook</button>
                </FacebookShareButton>
                <TwitterShareButton url={shareUrl} title={event.title}>
                    <button>分享到 Twitter</button>
                </TwitterShareButton>
                <WeiboShareButton url={shareUrl} title={event.title} description={event.description}>
                    <button>分享到 微博</button>
                </WeiboShareButton>
                <WeChatShareButton url={shareUrl}>
                    <button>分享到 微信</button>
                </WeChatShareButton>
                <EmailShareButton url={shareUrl} subject={event.title} body={event.description}>
                    <button>通过邮件分享</button>
                </EmailShareButton>
            </div>
        </div>
    );
};

export default EventDetail;